import Vue from 'vue'
import Main from './Message.vue'

const MessageConstructor = Vue.extend(Main)

let instance
const instances = []
let seed = 1
const Message = function(message, color) {
  const id = seed++
  instance = new MessageConstructor({
    data: {
      id: id,
      message: message,
      color: color
    }
  })
  instance.id = 'message_' + id
  instance.vm = instance.$mount()
  document.getElementById('messageBox').appendChild(instance.vm.$el)
  instance.vm.visible = true
  instance.dom = instance.vm.$el
  instances.push(instance)
  return instance.vm
}

Message.info = function(message) {
  Message(message, 'blue darken-2')
}

Message.success = function(message) {
  Message(message, 'green darken-2')
}

Message.warning = function(message) {
  Message(message, 'orange darken-2')
}

Message.error = function(message) {
  Message(message, 'red darken-2')
}

Message.close = function(id) {
  for (let i = 0; i < instances.length; i++) {
    if (id === instances[i].id) {
      instances.splice(i, 1)
      break
    }
  }
}

Message.closeAll = function() {
  for (let i = instances.length - 1; i >= 0; i--) {
    instances[i].close()
  }
}

export default Message
